<template>
  <!-- 添加好友 -->
  <div class="wrap">
    <div style="margin-top: 43px; margin-left: 16px" v-if="noShow">
      <div class="invitees-information">
        <div class="head-portrait">
          <img :src="active" alt />
        </div>
        <div class="information">
          <div class="name">{{ name }}</div>
          <div class="companyName">{{ companyName }}</div>
        </div>
      </div>
      <div class="join">申请添加您为好友</div>

      <!-- 验证邀请是否过期 -->
      <div class="isShow" v-if="!alreadyJoin">
        <!-- 失效 -->
        <div v-if="urlValid === false" class="LinkFailure">该链接失效</div>
        <!-- 可加入 -->
        <div v-else>
          <!-- 手机号 -->
          <div>
            <div
              class="phone"
              :class="!nicknameShow ? 'mr-55' : ''"
              v-if="phone"
            >
              <span class="toast">你的手机号：</span>
              {{ phone }}
            </div>
            <!-- 微信分享输入手机号 -->
            <div v-else class="VerificationCode">
              <input
                id="yzm"
                placeholder="输入手机号"
                v-model="receiverPhone"
              />
            </div>
          </div>
          <!-- 验证码校验 -->
          <div class="VerificationCode" style="margin-top: 20px">
            <input id="yzm" placeholder="输入验证码" v-model="code" />
            <div class="text" @click="getVerificationCode" v-if="setTimeOut">
              获取验证码
            </div>
            <div class="text" @click="recapture" v-else-if="setTimeOutAgain">
              重新获取
            </div>
            <!-- 秒钟 -->
            <div v-else class="text">{{ count }}s</div>
          </div>
          <!-- 验证码错误 -->
          <div class="error" v-if="error">{{ tips }}</div>
        </div>
      </div>
    </div>
    <!-- 申请添加好友成功 -->
    <div v-else class="join-successfully">
      <div><img :src="active" alt="" /></div>
      <div>您已添加加{{ name }}</div>
      <div>请前往查看吧!</div>
    </div>
    <!-- 下载或加入 -->
    <div class="jions">
      <!-- 下载 -->
      <div v-if="isShow || urlValid === false">
        <van-button type="info" @click="openApp">下载</van-button>
      </div>
      <!--  -->
      <div v-else>
        <van-button type="info" @click="jion">加入</van-button>
      </div>
    </div>
    <!-- 跳转天使搜 -->
    <div class="jumpBottom" v-if="isShow || alreadyJoin">
      <div class="jump" @click="openApp">
        已有天使搜，前往打开
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>
<script>
import {
  getAddFriendApplyInvitedRecordByCode,
  sendCode,
  checkCodeInvalid,
  addFriendByApplyCode
} from "../../api/logo.js";
export default {
  name: "addFriends",
  data() {
    return {
      name: "",
      companyName: "",
      active: "",
      noShow: true,
      alreadyJoin: false,
      nicknameShow: true,
      urlValid: true,
      phone: "",
      receiverPhone: "",
      code: "",
      setTimeOut: true,
      setTimeOutAgain: false,
      count: "",
      error: false,
      tips: "",
      logo: "",
      isShow: false,
      igToken: ""
    };
  },
  created() {
    var url = window.location.href.split("?")[1].split("&");
    var Id = url[0].split("=")[1];
    this.igToken = Id;
    this.getInfo();
  },
  methods: {
    // 如果本地安装了app，直接打开
    openApp() {
      if (/(Android)/i.test(navigator.userAgent)) {
        window.location.href = "fenmu://tianshisou:10080/splash";
        window.setTimeout(function() {
          window.location.href = "http://www.wjtr.com/download/index.html";
        }, 3000);
      } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        window.location.href =
          "https://apps.apple.com/cn/app/id1516734852"; /***打开app的协议，有IOS同事提供***/
      }
    },
    // 获取申请信息
    getInfo() {
      const params = {
        igToken: this.igToken
      };
      getAddFriendApplyInvitedRecordByCode(params).then(res => {
        this.name = res.data.nickName;
        this.companyName = res.data.companyName;
        this.active = res.data.avatar;
        this.urlValid = res.data.urlValid;
        this.phone = res.data.phone.replace(/^(.{3})(.*)(.{4})$/, "$1 $2 $3");
        this.receiverPhone = res.data.phone;
      });
    },
    // 重新获取验证码
    recapture() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.setTimeOut = false;
        this.setTimeOutAgain = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.setTimeOutAgain = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      this.verifcationCode();
    },
    // 发送验证码
    verifcationCode() {
      const params = {
        phone: this.receiverPhone,
        codeType: 3
      };
      sendCode(params).then(res => {
        if (res.code === "1") {
          this.tips = res.msg;
          this.error = true;
        } else if (res.code === "0000") {
          this.error = false;
        }
      });
    },
    // 校验验证码
    check() {
      const params = {
        phone: this.receiverPhone,
        codeType: 3,
        code: this.code
      };
      checkCodeInvalid(params).then(res => {
        if (res.code === "1") {
          this.tips = res.msg;
          this.error = true;
        } else if (res.data.errorCode === "1") {
          this.tips = res.data.errorMsg;
          this.error = true;
        } else {
          this.error = false;
          this.checkIn();
        }
      });
    },
    // 点击获取验证码
    getVerificationCode() {
      console.log(this.receiverPhone, "this.receiverPhone");
      const regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (!regs.test(this.receiverPhone)) {
        this.verifcationCode();
      } else {
        this.error = false;
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.setTimeOut = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.setTimeOutAgain = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
        this.verifcationCode();
      }
    },
    // 校验成功之添加好友
    checkIn() {
      const params = {
        igToken: this.igToken
      };
      addFriendByApplyCode(params).then(res => {
        if (res.code === "0000") {
          this.isShow = true;
          this.noShow = false;
        }
      });
    },
    // 添加成功
    jion() {
      this.check();
    }
  }
};
</script>
<style lang="less" scoped>
.wrap {
  user-select: none;
}

.invitees-information {
  display: flex;
}

.head-portrait img {
  width: 48px;
  height: 48px;
  border-radius: 3px;
}

.information {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
}

.name {
  font-size: 17px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  margin-bottom: 6px;
  margin-right: 40px;
  color: #03111b;
}

.companyName {
  font-size: 14px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #9ca1a5;
}

.join {
  text-align: center;
  margin-top: 47px;
  font-size: 22px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #03111b;
  line-height: 30px;
}

.LinkFailure {
  text-align: center;
  font-size: 17px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #f94b4b;
  line-height: 24px;
  margin: 76px 0px;
}
/deep/.van-button--info {
  width: 91vw;
  height: 48px;
}
.jumpBottom {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 21px;
}
.jump {
  text-align: center;
  font-size: 14px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #2e7ff7;
  line-height: 20px;
}
/deep/ .van-icon-arrow {
  vertical-align: -3px;
}
.phone {
  font-size: 17px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #03111b;
  line-height: 24px;
  margin-bottom: 28px;
}
.toast {
  font-size: 14px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #9ca1a5;
  line-height: 20px;
}
.mr-55 {
  margin-top: 55px;
}
.mr-70 {
  margin-top: 70px;
}
.VerificationCode {
  width: 91vw;
  display: flex;
  height: 49px;
  line-height: 49px;
  background: #f8fafc;
  border-radius: 4px;
}
.phoneCode {
  width: 91vw;
  display: flex;
  height: 49px;
  line-height: 49px;
  background: #f8fafc;
  border-radius: 4px;
}
#yzm {
  padding: 0px 16px;
  height: 100%;
  width: 345px;
  box-sizing: border-box;
  background-color: #f8fafc;
  border: none;
  -webkit-appearance: none;
  font-size: 17px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
}
.text {
  flex: 1;
  font-size: 17px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #2e7ff7;
  padding-right: 16px;
  text-align: right;
  position: absolute;
  right: 10px;
}
.error {
  font-size: 15px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #f94b4b;
  line-height: 17px;
  margin-top: 8px;
  margin-bottom: 35px;
}
.check {
  text-align: center;
  height: 21px;
  font-size: 17px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #03111b;
  line-height: 21px;
  margin: 12px 0px 58px 0px;
}
.jions {
  margin-top: 68px;
  text-align: center;
}
button {
  border-radius: 4px;
  font-size: 17px;
  background-color: #3b81ea;
  border: none;
  color: #fff;
}
.isShow {
  margin-top: 55px;
}
input {
  outline-color: #3b81ea;
}
.join-successfully div:nth-child(2) {
  font-size: 22px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #03111b;
  margin-top: 29px;
  line-height: 30px;
}
.join-successfully div:nth-child(3) {
  font-size: 17px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #03111b;
  line-height: 21px;
  margin-top: 12px;
}
.join-successfully div:nth-child(1) {
  img {
    width: 70px;
    height: 70px;
  }
}
.join-successfully {
  text-align: center;
  margin-top: 98px;
}
</style>
